<template>
	<div class="smart-assistant-config">
		<!--配置模块-->
		<div class="config-module">
			<div class="header">
				<span>智能助手配置</span>
				<div>
					<h-button type="info" class="btn">保存</h-button>
					<h-button type="ghost" class="btn preview" @click="preview">{{isShowPreveiw ? '取消预览' : '预览' }}</h-button>
				</div>
			</div>
			<section>
				<div class="row">
					<div class="title-main">大标题</div>
					<h-input v-model="formItem.greet" style="max-width: 700px" placeholder="请输入"></h-input>
				</div>
			</section>
			<section>
				<div class="row">
					<div class="title-main">开场白</div>
					<h-input v-model="formItem.introduction" style="max-width: 700px" placeholder="请输入"></h-input>
				</div>
			</section>
			<section>
				<div class="title-main">
					猜你想问
					<h-button type="ghost" @click="addTreeItem({level: 0})">
						<svg-icon iconClass="add" class="add"></svg-icon>新增一级分类
					</h-button>
				</div>
				<div class="recommend-tree-wrap">
					<h-tree ref="recommendTree" :data="recommendList" :render="renderContent"></h-tree>
				</div>
			</section>
			<section>
				<div class="title-main">
					快速意图
					<h-button type="ghost" @click="addEntry">
						<svg-icon iconClass="add" class="add"></svg-icon>新增意图
					</h-button>
				</div>
				<div class="entry-list">
					<div class="entry-item" v-for="(item, index) in entryList" :key="index">
						<label>意图{{index + 1}}</label>
						<h-input v-model="item.text" placeholder="请输入" style="width: 340px" :disabled="item.disabled"></h-input>
						<svg-icon v-if="!item.disabled" iconClass="delete2" class="delete" @svgEvent="deleteEntry(index)"></svg-icon>
					</div>
				</div>
			</section>
		</div>
		<!--预览模块-->
		<div class="preview-module" v-show="isShowPreveiw">
			<lm-dialogue-panel :isPreview="true"></lm-dialogue-panel>
		</div>
		<!--新增问题弹框-->
		<h-msg-box v-model="showModal" width="530" title="新增问题" :mask-closable="false" :beforeOkClose="addComfirm">
			<h-form :model="formData" ref="form" cols="1" :label-width="90">
				<h-form-item label="问题" prop="questionIput" required>
					<h-input v-model="formData.questionIput" placeholder="请输入问题"></h-input>
				</h-form-item>
			</h-form>
		</h-msg-box>
	</div>
</template>

<script>
import addImg from '@/assets/images/add-gray.svg'
import deleteImg from '@/assets/images/delete2.svg'
import editImg from '@/assets/images/edit.svg'
import LmDialoguePanel from '@/components/lm-chat/lm-dialogue-panel.vue'
export default {
	name: 'SmartAssistantConfig',
	components: {
		LmDialoguePanel
	},
	data() {
		return {
			showModal: false,
			isShowPreveiw: false, // 是否显示预览
			formData: {
				questionIput: ''
			},
			addImg,
			deleteImg,
			editImg,
			formItem: {
				greet: '你好，我是你的代理人智能助手',
				introduction: '我可通过聊天内容和您的指令为您提供有用信息，帮助您完成对话处理。'
			},
			// 猜你想问
			recommendList: [
				{
					name: '知识问答',
					isEdit: false,
					level: 1,
					expand: true,
					id: '00',
					children: [
						{
							name: '公司问题',
							isEdit: false,
							level: 2,
							expand: true,
							id: '01',
							children: [
								{
									name: '保勤保险公司怎么样？',
									isEdit: false,
									level: 3,
									id: '011',
								},
								{
									name: '保险公司的优势？',
									isEdit: false,
									level: 3,
									id: '012',
								}
							]
						},
						{
							name: '业务流程',
							isEdit: false,
							level: 2,
							expand: true,
							id: '02',
							children: [
								{
									name: '怎么进行投保？',
									isEdit: false,
									level: 3,
									id: '021',
								},
								{
									name: '如何查询保单？',
									isEdit: false,
									level: 3,
									id: '022',
								}
							]
						},
						{
							name: '基础知识',
							isEdit: false,
							level: 2,
							expand: true,
							id: '03',
							children: [
								{
									name: '保险是什么？',
									isEdit: false,
									level: 3,
									id: '031',
								},
								{
									name: '保险有什么种类？',
									isEdit: false,
									level: 3,
									id: '032',
								}
							]
						}
					]
				},
				{
					name: '产品详情',
					isEdit: false,
					level: 1,
					expand: true,
					id: '1',
					children: [
						{
							name: '公司问题2',
							isEdit: false,
							level: 2,
							expand: true,
							id: '11',
							children: [
								{
									name: '保勤保险公司怎么样？',
									isEdit: false,
									level: 3,
									id: '111',
								},
								{
									name: '保险公司的优势？',
									isEdit: false,
									level: 3,
									id: '112',
								}
							]
						},
						{
							name: '业务流程2',
							isEdit: false,
							level: 2,
							expand: true,
							id: '12',
							children: [
								{
									name: '怎么进行投保？',
									isEdit: false,
									level: 3,
									id: '121',
								},
								{
									name: '如何查询保单？',
									isEdit: false,
									level: 3,
									id: '122',
								}
							]
						},
						{
							name: '基础知识2',
							isEdit: false,
							level: 2,
							expand: true,
							id: '13',
							children: [
								{
									name: '保险是什么？',
									isEdit: false,
									level: 3,
									id: '131',
								},
								{
									name: '保险有什么种类？',
									isEdit: false,
									level: 3,
									id: '132',
								}
							]
						}
					]
				},
				{
					name: '保险观念',
					isEdit: false,
					level: 1,
					expand: true,
					id: '2',
					children: [
						{
							name: '公司问题3',
							isEdit: false,
							level: 2,
							id: '21',
							children: [
								{
									name: '保勤保险公司怎么样？',
									isEdit: false,
									id: '211',
								},
								{
									name: '保险公司的优势？',
									isEdit: false,
									id: '212',
								}
							]
						},
						{
							name: '业务流程3',
							isEdit: false,
							level: 2,
							expand: true,
							id: '22',
							children: [
								{
									name: '怎么进行投保？',
									isEdit: false,
									id: '221',
								},
								{
									name: '如何查询保单？',
									isEdit: false,
									id: '222',
								}
							]
						},
						{
							name: '基础知识3',
							isEdit: false,
							level: 2,
							expand: true,
							id: '23',
							children: [
								{
									name: '保险是什么？',
									isEdit: false,
									id: '231',
								},
								{
									name: '保险有什么种类？',
									isEdit: false,
									id: '232',
								}
							]
						},
						{
							name: '基础知识3',
							isEdit: false,
							level: 2,
							expand: true,
							id: '24',
							children: [
								{
									name: '保险是什么？',
									isEdit: false,
									id: '241',
								},
								{
									name: '保险有什么种类？',
									isEdit: false,
									id: '242',
								}
							]
						}
					]
				}
			],
			// 快速意图列表
			entryList: [
				{
					text: '推荐产品',
					disabled: true
				},
				{
					text: '制作建议书',
					disabled: true
				},
				{
					text: '产品费率',
					disabled: true
				},
				{
					text: '快速出单',
					disabled: true
				},
				{
					text: '业绩查询',
					disabled: true
				},
				{
					text: '活动量管理',
					disabled: true
				},
				{
					text: '产品比对',
					disabled: true
				}
			]
		}	
	},
	mounted() {
		// this.$refs.recommendTre.expandTree(true)
	},
	methods: {
		// tree渲染内容
		renderContent(h, { root, node, data }) {
      return h(
        "div",
				{
					class: 'item-content'
				},
        [
					!data.isEdit ?
          h("div", 
						{
							class: 'item-name ellipsis',
							domProps: {
								'title': data.name
							},
						},
						data.name
					) :
					h("input", 
						{
							class: 'item-name input',
							domProps: {
								'value': data.name
							},
							on: {
								blur: (e) => {
									this.inputBlur(e.target.value, data)
								}
							}
						}
					),
					h("div", {
						class: 'ope-bar'
					},[
						h('img', 
							{
								class: "img-icon",
								domProps: {
									'src': editImg
								},
								on: {
									click: () => {
										this.editTreeItem(data)
									}
								}
							}
						),
						data.children ?
						h('img', 
							{
								class: "img-icon",
								domProps: {
									'src': addImg
								},
								on: {
									click: () => {
										this.addTreeItem(data)
									}
								}
							}
						) : 
						h('span',
							{
								class: "empty"
							}
						),
						h('img', 
							{
								class: "img-icon",
								domProps: {
									'src': deleteImg
								},
								on: {
									click: () => {
										this.deleteTreeItem(data)
									}
								}
							}
						)
					])
        ]
      );
		},
		// 编辑问题
		editTreeItem(data) {
			data.isEdit = true
		},
		// 新增问题
		addTreeItem(data) {
			this.$refs.form.resetFields()
			this.formData.questionIput = ''
			this.formData = data
			this.showModal = true
		},
		// 新增确定
		addComfirm() {
			let item = {
				name: this.formData.questionIput,
				isEdit: false,
				expand: false,
				id: new Date().getTime().toString()
			}
			if(this.formData.level === 0) {
				item.level = 1
				item.children = []
			} else if(this.formData.level === 1) {
				item.level = 2
				item.children = []
			} else if(this.formData.level === 2) {
				item.level = 3
			}
			if(this.formData.level === 0) {
				this.recommendList.push(item)
			} else {
				this.addNode(this.recommendList, this.formData.id, item)
			}
			this.showModal = false
		},
		// 新增节点
		addNode(nodeList, itemId, item) {
      for (let i = 0; i < nodeList.length; i++) {
        const node = nodeList[i];
        if (node.id === itemId) {
					node.expand = true
          node.children.push(item);
          return
        } else if (node.children) {
          this.addNode(node.children, itemId, item);
        }
      }
    },
		// 点击删除问题项
		deleteTreeItem(data) {
			this.deleteNode(this.recommendList, data.id)
		},
		// 删除节点
		deleteNode(nodeList, itemId) {
      for (let i = 0; i < nodeList.length; i++) {
        const node = nodeList[i];
        if (node.id === itemId) {
          nodeList.splice(i, 1);
          return;
        } else if (node.children && node.children.length > 0) {
          this.deleteNode(node.children, itemId);
        }
      }
    },
		// iput失去焦点时间
		inputBlur(val, data) {
			data.name = val
			data.isEdit = false
		},
		// 新增意图入口
		addEntry() {
			this.entryList.push({
				text: ''
			})
		},
		// 删除意图入口
		deleteEntry(index) {
			this.entryList.splice(index, 1)
		},
		// 预览
		preview() {
			this.isShowPreveiw = !this.isShowPreveiw
		}
	}
}
</script>

<style lang="scss" scoped>
.smart-assistant-config{
	height: 100%;
	display: flex;
	.config-module{
		flex:1;
		padding: 0 10px 0px 20px;
		height: 100%;
		overflow-y: auto;
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6px 0;
			border-bottom: 1px solid #E7E7E7;
			margin-bottom: 30px;
			span{
				font-size: 16px;
				color: #3D3D3D;
				font-weight: bold;
			}
			.btn{
				width: 104px;
				padding: 6px 13px;
				border-radius: 4px;
				&.preview{
					margin-left: 20px;
				}
			}
		}
		section{
			margin-bottom: 30px;
			.title-main{
				font-size: 14px;
				color: #333333;
				font-weight: bold;
				margin-bottom: 10px;
				/deep/ .h-btn{
					border-radius: 4px;
					border-color: #D1D4FF;
					color: #4686F2;
					padding: 6px 13px;
					margin-left: 30px;
					.add{
						margin-right: 6px;
						position: relative;
						top: 1px;
					}
				}
			}
			/deep/ .h-input{
				border-radius: 4px;
			}
			.recommend-tree-wrap{
				width: 450px;
				/deep/ .h-tree-item{
					display: flex;
					.item-content{
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-left: 4px;
						.item-name{
							flex: 1;
							width: 0;
							&.input{
								border-radius: 4px;
								height: 28px;
								border: 1px solid #d7dde4;
								padding: 0 8px;
								&:focus{
									border-color: #54a4ff;
									outline: 0;
									box-shadow: 0 0 0 2px rgba(41,141,255,.2);
								}
							}
						}
						.ope-bar{
							display: flex;
							margin-left: 10px;
							.img-icon{
								cursor: pointer;
								margin-left: 12px;
								width: 16px;
								height: 16px;
							}
							.empty{
								display: inline-block;
								width: 16px;
								margin-left: 12px;
							}
						}
					}
				}
			}
			.entry-list{
				margin-top: 20px;
				.entry-item{
					display: flex;
					align-items: center;
					margin-bottom: 20px;
					label{
						margin-right: 10px;
					}
					.delete{
						margin-left: 6px;
					}
				}
			}
		}
	}
	.preview-module{
		width: 580px;
    height: 100%;
	}
}
</style>